<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button type="primary" @click="edit('')" :icon="Plus">
          新增
        </el-button>
        <pub-import
          v-hasPermissions="['ZZDA-import']"
          @uploadSuccess="getList"
          importUrl="/seniorElder/import"
          templateDownloadUrl="zzdaTemplate"
          templateName="长者档案导入模板"
          importErrorDownloadUrl="zzdaErrorTemplate"
          btn-name="导入"
          dialogTitle="导入长者档案"
          accept=".xlsx,.xls"
          :can-repeat="true"
          style="margin-left: 10px"
        ></pub-import>
        <pub-download
          style="margin-left: 10px"
          url="zzdaExport"
          fileType="excel"
          :params="searchForm"
          file-name="设施信息填报情况统计"
        >
          <template v-slot:default="slotProps">
            <el-button
              :loading="slotProps.loading"
              type="primary"
              :icon="Files"
              class="btn-text-export"
            >
              导出
            </el-button>
          </template>
        </pub-download>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:area="scope">
        {{
          scope.row.provinceName +
          scope.row.cityName +
          scope.row.countyName +
          scope.row.streetName +
          scope.row.communityName
        }}
      </template>
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="detail(scope.row.id)">
          详情
        </el-button>
        <el-button plain type="primary" @click="edit(scope.row.id)">
          编辑
        </el-button>

        <el-dropdown style="margin-left: 20px" size="medium">
          <el-button class="more">
            更多
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :disabled="true" @click="del(scope.row.id)">
                删除
              </el-dropdown-item>
              <el-dropdown-item
                :disabled="false"
                @click="openEditDialog(scope.row)"
              >
                表单弹窗
              </el-dropdown-item>
              <el-dropdown-item
                :disabled="false"
                @click="openDetailDialog(scope.row.id)"
              >
                详情弹窗
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <!-- 详情页-自带关闭按钮 -->
    <pub-page-dialog-close v-model:show="isShow.detailShow">
      <detail-com :id="currentId"></detail-com>
    </pub-page-dialog-close>
    <!-- 详情弹窗 -->
    <pub-dialog
      v-if="isShow.detailDialogShow"
      title="编辑"
      :hasExtraBtn="true"
      v-model:visible="isShow.detailDialogShow"
      width="800"
    >
      <detail-dialog
        :id="currentId"
        @close="isShow.detailDialogShow = false"
      ></detail-dialog>
    </pub-dialog>
    <!-- 表单页 -->
    <pub-page-dialog v-model:show="isShow.editShow">
      <edit-com
        @success="submitSuccess"
        @close="isShow.editShow = false"
        :id="currentId"
      ></edit-com>
    </pub-page-dialog>
    <!-- 表单弹窗 -->
    <pub-dialog
      v-if="isShow.editDialogShow"
      title="编辑"
      :hasExtraBtn="true"
      v-model:visible="isShow.editDialogShow"
      width="800"
    >
      <edit-dialog
        :id="currentId"
        @success="submitSuccess"
        @cancel="isShow.editDialogShow = false"
      ></edit-dialog>
    </pub-dialog>
  </list-page>
</template>
  
  <script setup>
import { Plus, Files } from '@element-plus/icons-vue'
import { useTable } from '@/hooks/UseTable'
import { get_zzda_list } from '@/api/basicSetting.js'
import { reset_password } from '@/api/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import detailCom from '@/view/demo/page-detail.vue'
import detailDialog from '@/view/demo/dialog-detail.vue'
import editDialog from '@/view/demo/dialog-edit.vue'
import editCom from '@/view/demo/page-edit.vue'
import { emitter } from '@/utils/bus.js'
import { appCurrentState } from '@/pinia/modules/app'
import { Sm4Dncrypt } from '@/utils/encryption.js'
import { useUserStore } from '@/pinia/modules/user'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { intersection } from 'lodash-es'
const router = useRouter()
const currentId = ref('')
const currentStatus = ref(1)
const searchColumns = ref([
  {
    label: '居住区划',
    el: 'AreaSelect',
    bind: 'areaCode',
    defaultValue:
      useUserStore().orgInfo.level == 5
        ? useUserStore().userParentArea
        : useUserStore().userLastArea,
    disabledLevel: -1,
    startFrom: `${
      (useUserStore().orgInfo.level == 5
        ? useUserStore().userAreaArr[2]
        : useUserStore().userParentArea) || '000000'
    }`,
    maxLevel: 4,
    labelWidth: 140
  },
  {
    label: '姓名',
    el: 'Input',
    bind: 'name',
    defaultValue: '',
    labelWidth: 50
  },
  {
    label: '证件号码',
    el: 'IdCardInput',
    bind: 'idCard',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '联系方式',
    el: 'Input',
    bind: 'contactNumber',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '年龄',
    el: 'AgeRange',
    bindBegin: 'minAge',
    bindEnd: 'maxAge',
    defaultValue: '',
    labelWidth: 50
  },
  {
    label: '数据状态',
    el: 'DictSelect',
    code: 'ZZDA-SJZT',
    bind: 'saveType',
    labelWidth: 80
  }
])
const isShow = reactive({
  detailDialogShow: false,
  detailShow: false,
  editShow: false,
  editDialogShow: false
})
const currentElderId = ref('')

const toJJYZ = id => {
  currentId.value = ''
  currentElderId.value = id
  isShow.detailShowJJYZ = true
}

const openDetailDialog = id => {
  currentId.value = id
  isShow.detailDialogShow = true
}

const columns = ref([
  { label: '姓名', prop: 'name' },
  { label: '证件号码', prop: 'idCard' },
  {
    label: '性别',
    prop: 'sexCode',
    type: 'formatDict',
    formatCode: 'XB'
  },
  { label: '出生日期', prop: 'birthDate' },
  { label: '年龄', prop: 'age' },
  { label: '联系方式', prop: 'contactNumber' },
  { label: '居住区划', prop: 'provinceName', type: 'slot', slot: 'area' },
  {
    label: '数据状态',
    prop: 'saveType',
    type: 'formatDict',
    formatCode: 'ZZDA-SJZT'
  },
  { label: '更新日期', prop: 'renewDate' },
  { label: '社区养老服务站', prop: 'orgName' },
  { label: '操作', type: 'option', width: '180', fixed: 'right' }
])
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_zzda_list)

const detail = id => {
  currentId.value = id
  isShow.detailShow = true
}

const submitSuccess = val => {
  isShow[val] = false
  search()
}

const edit = id => {
  currentId.value = id
  isShow.editShow = true
}

const openEditDialog = row => {
  currentId.value = row.id
  isShow.editDialogShow = true
}

const del = id => {
  ElMessageBox.confirm('是否确认删除所选择数据?')
    .then(async () => {
      // let res = await del_zzda_list(id)
      //   if (res.succeed) {
      //     ElMessage({
      //       type: 'success',
      //       message: res.msg
      //     })
      //     search()
      //   }
    })
    .catch(() => {})
}

const reset = id => {
  ElMessageBox.confirm('是否确认重置所选择数据?')
    .then(async () => {
      //   let res = await reset_password({ id: id, operateType: '1' })
      //     if (res.succeed) {
      //       ElMessageBox.alert(
      //         `重置密码成功！重置后的密码是：${Sm4Dncrypt(res.data)}`,
      //         {
      //           confirmButtonText: '确定',
      //           callback: action => {}
      //         }
      //       )
      //       search()
      //     }
    })
    .catch(() => {})
}

onBeforeMount(() => {
    getList()
})
</script>
  <style lang="scss" scoped></style>
  